import * as React from 'react';
// import Box from '@/common/box/index';

import { ListItemProps } from '@/pages/query/types';
import { Link } from 'react-router-dom';

import './index.module.scss';
const { memo, useMemo } = React;

function ListItem(props: ListItemProps) {
  const {
    dTime,
    aTime,
    dStation,
    aStation,
    trainNumber,
    date,
    time,
    priceMsg,
    dayAfter,
    trainShowDesc,
  } = props;
  const url = useMemo(() => {
    return `/ticket?aStation=${aStation}&dStation=${dStation}&trainNumber=${trainNumber}&date=${date}&time=${time}&dTime=${dTime}&aTime=${aTime}`;
  }, [aStation, dStation, trainNumber, date]);

  return (
    <li styleName="list-item">
      <Link to={url}>
        <span styleName="item-time">
          <em>{dTime}</em>
          <br />
          <em styleName="em-light">
            {aTime} <i styleName="time-after">{dayAfter}</i>
          </em>
        </span>
        <span styleName="item-stations">
          <em>
            <i styleName="train-station train-start">始</i>
            {dStation}
          </em>
          <br />
          <em styleName="em-light">
            <i styleName="train-station train-end">终</i>
            {aStation}
          </em>
        </span>
        <span styleName="item-train">
          <em>{trainNumber}</em>
          <br />
          <em styleName="em-light">{time}</em>
        </span>
        <span styleName="item-ticket">
          <em>{priceMsg}</em>
          <br />
          <em styleName="em-light-orange">{trainShowDesc}</em>
        </span>
      </Link>
    </li>
  );
}
export default memo(ListItem);
